<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>WeUI</title>
    <link rel="stylesheet" href="./style/weui.css"/>
    <link rel="stylesheet" href="./example.css"/>
</head>
<body ontouchstart>
	<div class="container" id="container">

    </div>
    <!-- tpl_home -->
	<script type="text/html" id="tpl_home">
	<div class="hd">
	    <h1 class="page_title">WeUI</h1>
	    <p class="page_desc">为微信Web服务量身设计</p>
	</div>
	<div class="bd">
	    <div class="weui_grids">
	        <a href="#/button" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_button"></i>
	            </div>
	            <p class="weui_grid_label">
	                Button
	            </p>
	        </a>
	        <a href="#/cell" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_cell"></i>
	            </div>
	            <p class="weui_grid_label">
	                Cell
	            </p>
	        </a>
	        <a href="#/toast" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_toast"></i>
	            </div>
	            <p class="weui_grid_label">
	                Toast
	            </p>
	        </a>
	        <a href="#/dialog" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_dialog"></i>
	            </div>
	            <p class="weui_grid_label">
	                Dialog
	            </p>
	        </a>
	        <a href="#/progress" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_progress"></i>
	            </div>
	            <p class="weui_grid_label">
	                Progress
	            </p>
	        </a>
	        <a href="#/msg" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_msg"></i>
	            </div>
	            <p class="weui_grid_label">
	                Msg
	            </p>
	        </a>
	        <a href="#/article" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_article"></i>
	            </div>
	            <p class="weui_grid_label">
	                Article
	            </p>
	        </a>
	        <a href="#/actionsheet" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_actionSheet"></i>
	            </div>
	            <p class="weui_grid_label">
	                ActionSheet
	            </p>
	        </a>
	        <a href="#/icons" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_icons"></i>
	            </div>
	            <p class="weui_grid_label">
	                Icons
	            </p>
	        </a>
	        <a href="#/panel" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_panel"></i>
	            </div>
	            <p class="weui_grid_label">
	                Panel
	            </p>
	        </a>
	        <a href="#/tab" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_tab"></i>
	            </div>
	            <p class="weui_grid_label">
	                Tab
	            </p>
	        </a>
	        <a href="#/searchbar" class="weui_grid">
	            <div class="weui_grid_icon">
	                <i class="icon icon_search_bar"></i>
	            </div>
	            <p class="weui_grid_label">
	                SearchBar
	            </p>
	        </a>
	    </div>
	</div>
	</script>

	<!-- tpl_dialog -->
	<script type="text/html" id="tpl_dialog">
	<div class="hd">
	    <h1 class="page_title">Dialog</h1>
    	<div id="ajax-cnt"></div>
	</div>
	<div class="bd spacing">
	    <a href="javascript:;" class="weui_btn weui_btn_primary" id="showDialog1">点击弹出Dialog样式一</a>
	    <a href="javascript:;" class="weui_btn weui_btn_primary" id="showDialog2">点击弹出Dialog样式二</a>
	</div>
	<div id="loadingToast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
	    <div class="weui_toast">
	        <div class="weui_loading">
	            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
	        </div>
	        <p class="weui_toast_content">数据加载中</p>
	    </div>
	</div>

	<!--BEGIN dialog1-->
	<div class="weui_dialog_confirm" id="dialog1" style="display: none;">
	    <div class="weui_mask"></div>
	    <div class="weui_dialog">
	        <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
	        <div class="weui_dialog_bd">自定义弹窗内容，居左对齐显示，告知需要确认的信息等</div>
	        <div class="weui_dialog_ft">
	            <a href="javascript:;" class="weui_btn_dialog default">取消</a>
	            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
	        </div>
	    </div>
	</div>
	<!--END dialog1-->
	<!--BEGIN dialog2-->
	<div class="weui_dialog_alert" id="dialog2" style="display: none;">
	    <div class="weui_mask"></div>
	    <div class="weui_dialog">
	        <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
	        <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
	        <div class="weui_dialog_ft">
	            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
	        </div>
	    </div>
	</div>
	<!--END dialog2-->
	</script>
	
	<!-- tpl_actionsheet -->
	<script type="text/html" id="tpl_actionsheet">
	<div class="hd">
	    <h1 class="page_title">ActionSheet</h1>
    	<div id="ajax-cnt"></div>
	</div>
	<div class="bd spacing">
	    <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉ActionSheet</a>
	</div>
	<!--BEGIN actionSheet-->
	<div id="actionSheet_wrap">
	    <div class="weui_mask_transition" id="mask"></div>
	    <div class="weui_actionsheet" id="weui_actionsheet">
	        <div class="weui_actionsheet_menu">
	            <div class="weui_actionsheet_cell" id="actionsheet-edit">编辑菜单</div>
	            <div class="weui_actionsheet_cell">示例菜单</div>
	            <div class="weui_actionsheet_cell">示例菜单</div>
	            <div class="weui_actionsheet_cell">示例菜单</div>
	        </div>
	        <div class="weui_actionsheet_action">
	            <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
	        </div>
	    </div>
	</div>
	<!--END actionSheet-->

	<div class="weui_dialog_alert" id="dialog2" style="display: none;">
	    <div class="weui_mask"></div>
	    <div class="weui_dialog">
	        <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
	        <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
	        <div class="weui_dialog_ft">
	            <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
	        </div>
	    </div>
	</div>
	
	<div id="loadingToast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
	    <div class="weui_toast">
	        <div class="weui_loading">
	            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
	            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
	        </div>
	        <p class="weui_toast_content">数据加载中</p>
	    </div>
	</div>
	</script>

	<script src="./zepto.min.js"></script>
	<script src="./router.min.js"></script>
	<script src="./example.js"></script>
</body>
</html>
